
<template>
  <Content :style="{padding: '5px', minHeight: '280px', background: '#fff'}">
    <i-form :label-width="60"
            :model="day"
            :rules="rules"
            ref="addForm">
      <FormItem label="标题"
                prop="title"><Input v-model="day.title"
               placeholder="这是标题"
               icon="ios-refresh">
        <Button slot="append"
                @click="getKey()">自动</Button>
        </Input>
        <input type="hidden"
               v-model="day.id">
      </FormItem>
      <FormItem label="健康">
        <Row :gutter="0">
          <Col span="16">
          <Slider v-model="day.bloodPressure"
                  :range="true"
                  :min="60"
                  :max="160"
                  :step="1"></Slider>
          </Col>
          <Col span="7"
               offset="1"><Input v-model="day.weight"
                 placeholder="体重">
          <span slot="prepend">体重</span>
          <span slot="append">KG</span>
          </Input></Col>
        </Row>
      </FormItem>
      <FormItem label="指标">
        <div class="item"
             v-for="(item,i) in day.items"
             :key="i">
          <Tooltip :content="item.name">
            <Icon :type="item.icon"
                  size="96"
                  :class="{cur:item.integral>0}"
                  @click="item.integral=0" />
            <div class="rate"
                 v-show="item.integral>-1">
              <Rate v-model="item.integral" />
            </div>
          </Tooltip>
        </div>
      </FormItem>
      <FormItem label="备注">
        <Input v-model="day.note"
               placeholder="说点什么"
               type="textarea"></Input>
      </FormItem>
      <FormItem label="照片">
        <div class="demo-upload-list"
             v-for="(item,i) in day.pics"
             :key="i">
          <template v-if="item.status === 'finished'||!item.status">
            <img :src="$store.state.api+item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline"
                    @click.native="handleView(i)"></Icon>
              <Icon type="ios-trash-outline"
                    @click.native="handleRemove(i)"></Icon>
            </div>
          </template>
          <template v-else>
            <Progress v-if="item.showProgress"
                      :percent="item.percentage"
                      hide-info></Progress>
          </template>
        </div>
        <Upload ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                name="files"
                :format="['gif','jpg','png']"
                :action="$store.state.api+'/file/upload'"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera"
                  size="20"></Icon>
          </div>
        </Upload>
        <Modal :title="file.name"
               v-model="visible">
          <img :src="$store.state.api+file.url"
               v-if="visible"
               style="width: 100%">
        </Modal>
      </FormItem>
      <div class="btns">
        <Button type="primary"
                @click="save()">保存</Button>
      </div>
    </i-form>
  </Content>
</template>
<script>
import Vue from "vue";
export default {
  data () {
    return {
      check: true,
      day: {},
      days: [],
      imgName: '',
      visible: false,
      file: {
        name: "",
        url: ""
      },
      rules: {
        title: [
          { required: true, message: '标题必填', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.days.push({ 'day': '2018-12-03', 'title': '这是第一天' })
      this.load()
    },
    getKey () {
      this.$http.get("/api/services/app/DailyLife/GetSaying").then(r => {
        this.day.title = r.result
      })
    },
    load () {
      var url = "/api/services/app/DailyLife/GetToday"
      var that = this
      this.$http.get(url).then(function (r) {
        console.log(r);
        if (r.success) {
          that.day = r.result;
        }
      })
    },
    save () {
      var that = this;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$http.post('/api/services/app/DailyLife/CreateOrUpdate', { 'dailyLife': this.day }).then((r) => {
            console.log(r)
            if (r.success) {
              this.$Message.success('成功');
              this.$router.replace("/health")
            }
          })
        } else {
          this.$Message.error('请检查表单');
        }
      })
    },
    handleView (i) {
      this.file = this.day.pics[i];
      this.visible = true;
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess (res, file) {
      console.log(res);
      file.url = res.result[0].url
      this.day.pics.push(file)
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: 'The file format is incorrect',
        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
      });
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      });
    },
    handleBeforeUpload () {
      const check = this.day.pics.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: 'Up to five pictures can be uploaded.'
        });
      }
      return check;
    }
  }
}
</script>
<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}
.layout-logo {
  width: 100px;
  height: 30px;
  font-size: 18px;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  color: white;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.ivu-layout-header {
  background-color: #2d8cf0;
}
.nav {
  float: left;
  width: 240px;
}
.content {
  margin-left: 290px;
}
.item {
  text-align: center;
  margin: 5px;
  display: inline-block;
  height: 140px;
  width: 140px;
  vertical-align: top;
  cursor: pointer;
}
.ivu-icon {
  color: #f7f7f7;
}
.item:hover .ivu-icon {
  color: #2d8cf0;
}
.cur {
  color: #2d8cf0;
}

.item .delete {
  background: #999;
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 28px;
  display: none;
  z-index: 999;
}
.item:hover .delete {
  display: block;
}
.item img {
  width: 200px;
  border: 1px solid #ddd;
}
.delete:hover {
  background: red;
}
.upload {
  display: inline-block;
  min-width: 200px;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.btns {
  text-align: right;
  padding: 10px;
  border-bottom: 1px dotted #eee;
}
</style>